{extend name="iframe" /}
{block name="css"}
<style type="text/css">
    .editForm{
        margin-top: 20px;
    }
    .submit_btn{
        display: none;
    }
    @media (min-width: 768px){
        .bootstrap-switch{
            margin-top: 7px;
        }
    }
</style>
{/block}

{block name="content"}
<div class="container-fluid content-wrapper-box">
    <div class="content-wrapper">
        <form class="form-horizontal editForm" action="" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label class="control-label col-xs-2">
                    <em class="must_fill">*</em>服务名&nbsp;
                </label>
                <div class="col-xs-8">
                    <input type="text" value="{$data.service_name}" name="service_name" class="form-control" placeholder="服务名" required data-msg="服务名不能为空">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-2">
                    启用状态&nbsp;
                </label>
                <div class="col-xs-8">
                    <input type="checkbox" value="{$data.status}" name="status" class="switch" checked>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-2">
                    检索关键字&nbsp;
                </label>
                <div class="col-xs-8">
                    <textarea  name="search_key" class="form-control" placeholder="服务检索关键字,关键字用逗号分隔">{$data.search_key}</textarea>
                </div>
            </div>

            <input type="hidden" name="id" value="{$data.id}">
            <input class="btn btn-primary submit_btn" onclick="submitFrom()" type="submit">
            <input class="btn btn-default reset_btn" type="hidden" onclick="resetForm()">
        </form>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
    $(function () {
        //初始化开关选项
        switchInit();

        $.validator.setDefaults({
            errorPlacement: function (error, element) {
                if (element.is(":radio") || element.is(":checkbox")) {
                    error.appendTo(element.parent().parent());
                } else {
                    error.appendTo(element.parent());
                }
            }
        });

    });
    //初始化开关选项
    function  switchInit() {
        var switch_obj = $('.switch'),i=0;
        switch_obj.bootstrapSwitch({
            onText:"<i class='fa fa-check'></i>",
            offText:"<i class='fa fa-close'></i>",
            onColor:"success",
            offColor:"danger",
            onSwitchChange:function(event,state){
                $(this).prop("checked",true);
                if(state===true){
                    $(this).val(1);
                }else{
                    $(this).val(2);
                }
            }
        });
        switch_obj.bootstrapSwitch('size','mini');
        for(;i < switch_obj.length;i++){
            if(switch_obj.eq(i).val()==='1'){
                switch_obj.eq(i).bootstrapSwitch('state',true);
            }else{
                switch_obj.eq(i).bootstrapSwitch('state',false);
            }
        }
    }
    //初始化日期控件
    function dateTimePickerInit() {
        $('.dateTimePicker').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss',
            locale: moment.locale('zh-cn')
        });
    }

    //提交表单
    function submitFrom() {
        var  frameIndex= parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        //表单验证
        $(".editForm").validate({
            keydown:true,
            submitHandler: function(form) {
                $(form).ajaxSubmit({
                    dataType:'json',
                    success:function (response) {
                        if(response.code === 0){
                            parent.toastr.success(response.msg);
                            parent.layer.close(frameIndex);
                        }else{
                            parent.toastr.error(response.msg);
                        }
                        //刷新数据表格
                        parent.searchForm();
                    }
                });
            }
        })
    }
</script>
{/block}
